<template>
  <div>
    <div class="container">
    <div class="left">
      <overData></overData>
      <Column ></Column>
    </div>
    <div class="right"><Table/>
    <Column2 ></Column2>
    </div>
    <div class="main">中间自适应</div>
  </div>
  </div>

</template>
<script setup>
import { ref } from "vue" 
import Card from './card.vue'
import overData from './overData/index.vue'
import Column from './column/index.vue'
import Column2 from './column2/index.vue'

import Table from './Table/index.vue'
</script>

<style scoped lang="css" >
.flex{
  display: flex;
  width: 100%;
  height: 100%;
  color:#fff;
  justify-content: space-between;
}
.item{
  width: 100%;
  /* background: ; */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container {
    color:#fff;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .left,
  .right,
  .main {
    height: 100%;
    /* line-height: 200px; */
    /* text-align: center; */
    
  }

  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    /* background: green; */
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 25%;
    /* background: green; */
  }

  .main {
    margin: 0 110px;
    /* background: black; */
    color: white;
  }
</style>